CSS-Grundlagen

Eine reine HTML-Seite ist optisch nicht besonders ansprechend. Das liegt daran, dass die Aufgabe von HTML in der Definition der Inhalte und der Strukturierung einer Webseite besteht. Die Formatierung der Inhalte ist die Aufgabe von CSS (Cascading Style Sheets). Ein Stylesheet ist eine einfache Textdatei, die eine oder mehrere Regeln enthält. Mit Eigenschaften und Werten legen diese Regeln fest, wie bestimmte Elemente auf der Webseite dargestellt werden sollen. Es gibt eine Vielzahl von CSS-Eigenschaften, die entweder grundlegende Formatierungen, wie Schriftart oder Schriftgröße steuern, oder Eigenschaften, die das Layout einer Seite festlegen. Es gibt auch dynamische Eigenschaften, um Elemente durch Interaktion des Benutzers anders aussehen oder erscheinen bzw. verschwinden lassen u.v.m.
Der große Vorteil von CSS ist, dass die Formatierungen in einer einzelnen, seperaten Textdatei erstellt werden und dann auf alle HTML-Seiten einer Site auf einmal angewendet werden können. Dadurch werden insbesondere spätere Änderungen an einer Website deutlich vereinfacht. Zudem kann die gleiche Seite auf verschiedenen Medien (Desktop, Tablet, Smartphone) völlig anders und dem Medium angepasst dargestellt werden, ohne dass an Inhalt und Struktur etwas geändert werden müsste.

Formatierungsregeln mit CSS

Jede CSS-Regel hat zwei Teile: den Selektor, der die Teile der Seite bestimmt, die durch die Regel betroffen sind, und den Deklarationsblock, der aus einem oder mehreren Eigenschaft-Wert-Paaren besteht (jedes Paar stellt eine Deklaration dar) und angibt, was beim Design genau angewendet werden soll.

See the Pen f54dcf6ae8fd3baf32d5036a3ce9f747 by Bernd Schiller (@Bernie14153) on CodePen.

Selektoren

Damit Formateigenschaften auf ein Element angewendet werden können, muss definiert werden, welche Elemente angesprochen werden. Dies geschieht über Selektoren. Als Selektoren bezeichnet man die Teile einer CSS-Regel, die vor dem Abschnitt aus geschweiften Klammern stehen. Die drei am häufigsten verwendeten Selektoren sind der Typselektor, der Klassenselektor und der IS-Selektor.
Der Element- bzw. Typselektor besteht aus dem Namen des Elements, das angesprochen werden soll. Mit diesem Selektor werden alle Elemente eines Typs angesprochen.
Ein Klassenselektor spricht Elemente an, die einer bestimmten Klasse zugehörend sind. Welche Elemente das sind, hängt von der verwendeten Auszeichnungssprache ab. In HTML-Dokumenten werden Klassen über das class-Attribut vergeben. Ein Klassenselektor wird gebildet, wenn vor dem Klassennamen ein Punkt notiert wird.
Mit dem ID-Selektor kann ein Element angesprochen werden, dem eine ID zugeordnet wurde. Ein ID-Selektor wird gebildet, indem das Gatterzeichen „#“ vor den ID-Namen gestellt wird. Ein bestimmter ID-Selektor darf auf einer Website nur ein einziges mal vorkommen!

See the Pen 1b005b6abe7da41e6c11c2e655c6d37e by Bernd Schiller (@Bernie14153) on CodePen.

Textformatierung mit CSS

Die meisten Webseiten im Internet dienen dazu, bestimmte Informationen zu vermitteln. Die wichtigste Form der Information ist dabei wohl der Text. CSS bietet dafür eine Vielzahl an CSS-Eigenschaften an, um den Text für die Webseiten zu gestalten bzw. anzupassen.

font-family

Mit der CSS-Eigenschaft font-family lässt sich die Schriftart für den Text innerhalb eines Elements auswählen. Als Wert übergibt man den Namen der gewünschten Schriftart, mit der der Text innerhalb des HTML-Elements formatiert werden soll.

p {font-family: Verdana;}

Voraussetzung, dass die entsprechende Schriftart für die Darstellung verwendet werden kann, ist, dass diese auf dem lokalen System des Besuchers der Webseite auch installiert ist. Es empfiehlt sich deshalb, mehrere Alternativen mit Kommata getrennt anzugeben, z.B.:

p {font-family: Verdana, Arial, sans-serif;}

In diesem Fall wird die Schriftart Verdana für das HTML-Element verwendet. Ist die Schriftart beim User nicht installiert, kann der Webbrowser alternativ Arial verwenden. Ist auch diese Schriftart nicht auf dem System vorhanden, wählt der Browser eine beliebige serifenlose Schriftart aus dem System für die Darstellung. Die Liste kann beliebig lang sein, und dr Browser verwendet die erste Schriftart, die auf dem System des Users installiert ist. Ist keine der angegebenen Schriftarten von font-family installiert, wird die Standardschriftart des Browsers verwendet.

font-size

Die Angabe der Schriftgröße scheint auf den ersten Blick trivial zu sein, aber stellt in der Praxis ein nicht unerhebliches Problem dar, weil die Einstellungen des Betriebssystems oder Bildschirme mit unterschiedlicher Auflösung die Darstellung beeinflussen.

Eine einfache Methode, die Schriftgröße für das ganze Dokument anzupassen, ist font-size für das body-Element zu setzen. Mit dem Wert 1em oder 100% erreicht man den Standardwert des Browsers, der in der Regel 16px entspricht. Will man die Schriftgröße des gesamten Dokuments um 10% erreichen setzt man font-size für das body-Element auf 1.1em oder 110%. Dadurch wird automatisch die Schriftgröße aller anderen Elemente wie z.B. h1 oder p um 10% erhöht. Dies beruht auf der Tatsache, dass die Eigenschaften des body-Elements vererbt wird. Dies kann aber auch zu unerwünschten Ergebnissen führen:

<style>
   body {font-size: 0.95em; /* = 95% */}
   article {font-size: 0.8em; /* = 80% */}
   p {font-size: 0.8em; /* = 80% */}
</style>

<body> <!--0.95em-->

   <article> <!-- 0.95*0.8em = 0.76em-->

      <p> <!-- 0.8*0.76em = 0.608em-->
      </p>

   </article>

</body>

Um dieses Vererbungsproblem zu vermeiden wurde in CSS3 die Maßeinheit rem (root em) eingeführt. Diese Einheit hält sich bei der Vererbung an das höchste Wurzelelement, im obigen Fall also body, und nicht an die Schriftgröße des entsprechenden Eltern-Elements.

Lange Zeit wurden Schriftgrößen in Pixel angegeben. Allerdings besitzen verschiedene Geräte heute unterschiedliche Pixeldichten in der Darstellung, so dass diese Angaben eher als unzuverlässig einzustufen sind und vermieden werden sollten.

font-style und font-weight

Mit der Eigenschaft font-style wird der Schritschnitt festgelegt. Der Schriftschnitt italic, auch als »kursiv« bezeichnet, hebt Begriffe, wörtliche Rede oder ganze Sätze im Fließtext hervor. CSS bietet zwei Optionen: italic und oblique. Dabei soll italic schräg gestellte Schrift nutzen, für die der Schriftdesigner die einzelnen Zeichen aufeinander und auf die Schrägstellung abgestimmt hat. Wenn kein italic-Schnitt vorhanden ist, soll der Browser die Schrift programmatisch schräg stellen – oblique.

Mit der Eigenschaft font-weight kann man die Strichstärke (fälschlicherweise Schriftgewicht genannt) bestimmen. Die Strichstärke bezeichnet die Dicke und Stärke einer Schrift. Mit dem Wert bold definiert man einen fetten Schriftschnitt.

line-height, letter-spacing und word-spacing

Mit der Eigenschaft line-height kann man die Höhe der Textzeile entweder relativ zur geltenden font-size-Angabe oder als absolute Angabe definieren. Eine Fließkommazahl oder Prozentangabe bestimmt die Zeilenhöhe als Vielfaches der Schriftgröße, das heißt, Angaben wie „line-height: 1.2“ und „line-height: 120%“ sind dabei identisch. Für normalen westlichen Text schwanken übliche line-height-Werte für normalen Text zwischen 1.25 und 1.4 wobei die Faustregel gilt: Je länger eine Zeile ist, um so größer sollte auch die Zeilenhöhe sein.

Mit der Eigenschaft letter-spacing kann man den Abstand zwischen den Buchstaben bzw. Zeichen im Text bestimmen.

Mit der Eigenschaft word-spacing kann man den Abstand zwischen Wörtern im Text bestimmen.

text-align

Die Eigenschaft text-align richtet Texte und andere Inline-Elemente wie Bilder innerhalb eines Blockelements rechtsbündig (right), linksbündig (left), zentriert (center) oder im Blocksatz (justify) aus. Die Vorgabe ist linksbündiger Text.